<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <meta name="description" content="博雅互动">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <title>博雅互动校园招募啦 - 首页</title>

  <link rel="stylesheet" href="../css/join/normalize.css">
  <link rel="stylesheet" href="../css/join/nav.css">
  <link rel="stylesheet" href="../css/join/tab.css">
  <style>
    .tab-list>ul>li {
      width: 500px;
    }

    .grow_top {
      margin-top: 50px;
      color: #fff;
      background: #8e96d1;
      padding: 15px 20px;
      border-radius: 5px;
      width: 100%;
    }

    .video-list {
      float: right;
    }

    .video-list li {
      display: block;
      padding: 10px;
      border-bottom: 1px solid #dcdcdc;
      cursor: pointer;
    }

    .video-list li.on {
      background: #dcdcdc;
    }

    .video-pane>ul>li:not(.on) {
      display: none;
    }
  </style>
</head>

<body>
  <header>
    <nav>
      <a href="#"></a>
      <ul>
        <li>
          <a href="/join" class="nav-link">首页</a>
        </li>
        <li>
          <a href="job.html" class="nav-link">校职招聘</a>
        </li>
        <li>
          <a href="life.html" class="nav-link current">生活在博雅</a>
        </li>
        <li>
          <a href="about.html" class="nav-link">关于</a>
        </li>
      </ul>
    </nav>
  </header>
  <main>
    <div class="po_banner"></div>
    <div class="tab">
      <div class="tab-list">
        <ul>
          <li class="on">成长在博雅</li>
          <li>视频展示</li>
        </ul>
      </div>
      <div class="tab-pane">
        <ul>
          <li class="on">
            <div class="grow_top cl">
              <i class="fl"></i>
              <div class="fl">
                <h3>博雅大学</h3>
                <p>旨在培养和输出一批优秀的管理干部和专家人才。</p>
              </div>
            </div>
            <div class="grow_pic">
              <h3>1、新生代培训：帮助新人快速融入博雅工作与文化</h3>
              <p>给所有新入职的新同学开展的入职培训，是通过一系列的课程、体验、互动交流帮助新员工快速融入博雅文化</p>
              <ul class="cl">
                <td>
                  <img src="http://join.boyaa.com/public/images/life_1.jpg" alt="">
                </td>
                <td>
                  <img src="http://join.boyaa.compublic/images/life_2.jpg" alt="">
                </td>
              </ul>
            </div>
            <div class="grow_pic">
              <h3>2、新生代培训：帮助新人快速融入博雅工作与文化</h3>
              <p>给所有新入职的新同学开展的入职培训，是通过一系列的课程、体验、互动交流帮助新员工快速融入博雅文化</p>
              <ul class="cl">
                <td>
                  <img src="http://join.boyaa.com/public/images/life_1.jpg" alt="">
                </td>
                <td>
                  <img src="http://join.boyaa.compublic/images/life_2.jpg" alt="">
                </td>
              </ul>
            </div>
            <div class="grow_pic">
              <h3>3、新生代培训：帮助新人快速融入博雅工作与文化</h3>
              <p>给所有新入职的新同学开展的入职培训，是通过一系列的课程、体验、互动交流帮助新员工快速融入博雅文化</p>
              <ul class="cl">
                <td>
                  <img src="http://join.boyaa.com/public/images/life_1.jpg" alt="">
                </td>
                <td>
                  <img src="http://join.boyaa.compublic/images/life_2.jpg" alt="">
                </td>
              </ul>
            </div>
          </li>
          <li>
            <div class="video-list">
              <ul>
                <li class="on" name="video1">
                  <img src="../images/join/video_1.jpg" alt="">
                  <div class="v_title">
                    <p>
                      下一站，博雅！
                    </p>
                  </div>
                </li>
                <li name="video2">
                  <img src="../images/join/video_2.jpg" alt="">
                  <div class="v_title">
                    <p>
                      看你如何阻止‘ 地主’
                    </p>
                  </div>
                </li>
              </ul>
            </div>
            <div class="video-pane">
              <ul>
                <li class="on">
                  <video controls="controls" width="650" height="360">
                    <source src="http://join.boyaa.com/public/video/video1.mp4" type="video/mp4"> 您的浏览器不支持 video 标签。
                  </video>
                </li>
                <li>
                  <video controls="controls" width="650" height="360">
                    <source src="http://join.boyaa.com/public/video/video2.mp4" type="video/mp4"> 您的浏览器不支持 video 标签。
                  </video>
                </li>
              </ul>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </main>


  <script src="../node_modules/jquery/dist/jquery.min.js"></script>
  <script src="../js/join/tab.js"></script>
  <script>
    $().ready(() => {
      Tab(".tab-list", ".tab-pane");
      Tab(".video-list", ".video-pane");
    });
  </script>
</body>

</html>
